<!-- 字幕 -->
<template>
  <div class="caption">
    <div class="caption__item" v-for="item in captionList">
      <div class="caption__time">
        字幕 {{ item.time }}
      </div>
      <div class="caption__content">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  captionList: {
    type: Array,
    default: () => [],
  }
})
</script>
<style lang="scss" scoped>
.caption{
  .caption__item{
    margin-top: 10px;
    .caption__time{
      font-weight: bold;
      font-size: 14px;
      color: #000000;
    }
    .caption__content{
      margin-top: 8px;
      background: #E7E7FB;
      border-radius: 15px;
      padding:10px 18px;
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      line-height: 18px;
    }
  }
}
</style>